<!-- 用户注册页面 -->
<template>
  <div class="page">
    <el-container>
      <div class="header">
        <h2 class="title">用户注册</h2>
      </div>

      <!-- <el-link :underline="true"
               type="primary"
               class="a"
               @click="gotouserUp">企业用户认证</el-link> -->
      <el-main>
        <el-form ref="registerForm"
                 :model="userinfo"
                 :rules="rules"
                 label-width="90px">
          <el-form-item label="用户名"
                        prop="name">
            <el-input v-model="userinfo.name"
                      class="input"
                      placeholder="请输入用户名"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="账号"
                        prop="username">
            <el-input v-model="userinfo.username"
                      class="input"
                      placeholder="请输入账号"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="密码"
                        prop="password">
            <el-input v-model="userinfo.password"
                      class="input"
                      placeholder="请输入6位以上密码"
                      type="password"
                      show-password
                      autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-progress :percentage="100" :format="format"></el-progress> -->
          <el-form-item label="确认密码"
                        prop="checkPassword">
            <el-input v-model="userinfo.checkPassword"
                      class="input"
                      placeholder="请输入确认密码"
                      type="password"
                      show-password
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号码"
                        prop="iphone">
            <el-input v-model="userinfo.iphone"
                      class="input"
                      placeholder="请输入大陆手机号码"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="真实姓名"
                        prop="idname">
            <el-input v-model="userinfo.idname"
                      class="input"
                      placeholder="请输入真实姓名"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="userinfo.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份号码"
                        prop="idnumber">
            <el-input v-model="userinfo.idnumber"
                      class="input"
                      placeholder="请输入身份证号码"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="Email"
                        prop="email">
            <el-input v-model="userinfo.email"
                      class="input"
                      placeholder="请输入电子邮箱"
                      clearable></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-button @click="backhome('registerForm')">取消</el-button>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-button type="primary"
                           @click="onSubmit('registerForm')">立即注册</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    var validatePass2 = (rule, value, callback) => {
      console.log(value)
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userinfo.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      userinfo: {
        name: '',
        username: '',
        password: '',
        checkPassword: '',
        iphone: '',
        email: '',
        idname: '',
        idnumber: '',
        sex: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入账号登录密码', trigger: 'blur' },
          { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, message: '请再次输入密码确认', trigger: 'blur' },
          { min: 5, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
        iphone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { max: 11, message: '手机号码有误', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱地址', trigger: 'blur' }
        ],
        idname: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        idnumber: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // 获取所有用户信息的用户名
  },

  methods: {
    gotouserUp () {
      console.log('dainji')
      // this.$router.replace({ name: 'UsersUp' })
      console.log(this.$router)
      this.$router.push('/usersup')
    },
    onSubmit (formName) {
      console.log('submit!')
      console.log(this.userinfo)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const api = '/register'
          this.$axios.post(api, this.userinfo)
            .then(res => {
              console.log(res)
              if (res.data === false) {
                this.$message({
                  type: 'warning',
                  message: `该账号已存在！`
                });
              } else {
                this.$message({
                  duration: 2000,
                  type: 'success',
                  message: `注册成功! 自动跳转登录页面`
                });
                setTimeout(() => {
                  this.$router.push('/');
                }, 2000)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    backhome (formName) {
      this.$refs[formName].resetFields()
      this.$router.push('/')
    },
  }
}
</script>

<style scoped>
.page {
  height: 100%;
  width: 100%;
  position: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/img/register.png");
}

.header {
  margin-top: 1.9rem;
  margin-bottom: 1.9rem;
}
.header h2 {
  margin-top: 40px;
  font-size: 20px;
  font-weight: bold;
  color: rgb(77, 139, 253);
  text-align: center;
}

.a {
  margin-left: 1050px;
  width: 130px;
  font-size: 17px;
  margin-bottom: 10px;
}
.a:hover {
  font-size: 18px;
  font-weight: bold;
}
.el-main {
  width: 49rem;
  height: 100%;
  margin: auto;
  background-color: rgba(251, 251, 251, 0.9);
  margin-bottom: 3.125rem;
  border-radius: 2%;
  box-shadow: 0.0625rem 0.0625rem 0.1875rem rgb(50, 50, 50, 0.8);
  text-align: center;
}
.input {
  padding-left: 0px;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>
